<template>
  <div class="footer">
    <div @click="() => _selectFooter(0)" class="footer_item">
      <img class="item_img" src="@/assets/index/footer/0.png" alt="" />
      <div class="_item_text">
        {{ $t("tab.dig") }}
      </div>
    </div>
    <div @click="() => _selectFooter(1)" class="footer_item">
      <img class="item_img" src="@/assets/index/footer/1.png" alt="" />
      <div class="_item_text">
        {{ $t("tab.market") }}
      </div>
    </div>
    <div @click="() => _selectFooter(2)" class="footer_item">
      <img class="item_img" src="@/assets/index/footer/2.png" alt="" />
      <div class="_item_text">
        {{ $t("tab.union") }}
      </div>
    </div>
    <div @click="() => _selectFooter(3)" class="footer_item">
      <img class="item_img" src="@/assets/index/footer/3.png" alt="" />
      <div class="_item_text">
        {{ $t("tab.note") }}
      </div>
    </div>
    <div @click="() => _selectFooter(4)" class="footer_item">
      <img class="item_img" src="@/assets/index/footer/4.png" alt="" />
      <div class="_item_text">
        {{ $t("tab.mall") }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
const router = useRouter();
import {useI18n} from "vue-i18n";
const { t } = useI18n();
const _selectFooter = (index) => {
  if(index === 1 || index === 3){
    Toast(t("coming"))
    return;
  }
  if(index === 0){
    router.push("/TruckMining")
  }
  if(index === 2){
    Toast(t("coming"))
    return;
    // router.push("/RankingList")
  }
  if(index === 4){
    router.push("/BlindBoxShop")
  }
};
</script>

<style scoped  lang="scss">
.footer {
  position: absolute;
  bottom: 0;
  height: 88px;
  width: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  padding: 0 14px;
  justify-content: space-between;
}

.footer_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._item_text {
  font-size: 13px;
  color: #ffffff;
  margin-top: 1.5vh;
}

.item_img {
  height: 40px;
  width: auto;
}

.item_active {
  color: #d3b13c;
}
</style>
